<template>
  <div class="container">
    <div class="basepadding">商品产品管理</div>

    <div class="basepadding" style="display: flex">
      <el-button class="bigbtn" type="primary" @click="ShopUserwpaddfn()">
        产品添加
      </el-button>
    </div>
    <div class="basepadding">
      <ztable
        ref="tablez"
        v-loading="tableloading"
        :datas="ShopUserwp"
        :tablecolumn="tablecolumn"
        @delfn="delfn"
      >
        <template #setting="setting">
          <el-table-column
            align="center"
            :label="setting.itemdata.label"
            :prop="setting.itemdata.value"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="ShopUserwpedtfn(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </template>
      </ztable>
    </div>
    <!-- 
    <div class="basepadding">
      <z-table
        v-if="!tableloading"
        ref="tablez"
        v-loading="tableloading"
        :datas="After"
        :delsbtn="false"
        :seachfalg="page == 'page' || page == 'page1' ? true : false"
        :tablecolumn="tablecolumn"
      >
        <template #setting="setting">
          <el-table-column
            align="center"
            :label="setting.itemdata.label"
            :prop="setting.itemdata.value"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="afterListedtfn(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </template>
        <template #settinguser>
          <el-table-column type="expand">
            <template #default="scope">
              <div style="height: 200px">
                <el-scrollbar>
                  <z-table
                    :datas="scope.row.AfterList"
                    style="background: none"
                    :tablecolumn="tablecolumn22child"
                  />
                </el-scrollbar>
              </div>
            </template>
          </el-table-column>
        </template>
      </z-table>
    </div> -->
    <shopuserwpedit ref="shopuserwpeditref" />
  </div>
</template>
<script>
  import { ref, onMounted } from 'vue'
  import shopuserwpedit from '@/views/ShopUserwp/components/shopuserwpedit.vue'
  import ztable from '@/components/zTable'
  import $z from '@/z/zindex.js'
  import { ElMessage } from 'element-plus'
  export default {
    components: {
      shopuserwpedit,
      ztable,
    },
    setup() {
      const shopuserwpeditref = ref(null)
      function ShopUserwpaddfn() {
        console.log(111, shopuserwpeditref.value)
        shopuserwpeditref.value.show({}, function () {
          getdata()
        })
      }
      onMounted(function () {
        console.log(123, shopuserwpeditref)
      })
      let ShopUserwp = ref([])
      let tablecolumn = [
        { type: 'selection' },
        { label: '日期', value: 'sjc' },
        { label: '产品名称', value: 'mc' },
        { label: '产品类型', value: 'lx' },
        { label: '产品规格', value: 'ggsstr' },
        { label: '产品型号', value: 'xh' },
        { label: '详情', value: 'setting' },
      ]
      let tableloading = ref(false)
      async function getdata() {
        tableloading.value = true
        let { data } = await $z.$axios.post('/ShopUserwp')
        ShopUserwp.value = data.map(function (e) {
          let ggs = []
          for (var i = 1; i <= 10; i++) {
            if (e[`gg${i}`] && e[`gg${i}`] != '') {
              ggs.push(e[`gg${i}`])
            }
          }
          return { ...e, ggs, ggsstr: ggs.join() }
        })
        tableloading.value = false
      }
      getdata()
      function ShopUserwpedtfn(data) {
        shopuserwpeditref.value.show(data, function () {
          getdata()
        })
      }
      async function delfn(datas) {
        let reqs = []
        datas.forEach(function (e) {
          reqs.push($z.$axios.post('/ShopUserwpdel', { id: e.id }))
        })
        await Promise.all(reqs)
        ElMessage.success('操作完成')
        getdata()
      }
      return {
        shopuserwpeditref,
        ShopUserwp,
        tableloading,
        getdata,
        tablecolumn,
        delfn,
        ShopUserwpedtfn,
        ShopUserwpaddfn,
      }
    },
    methods: {},
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/tablecss.scss';
  .bigbtn {
    height: 70px;
    padding: 0 60px;
    font-size: 28px;
    margin-right: 60px;
  }
</style>
